import Taro from '@tarojs/taro';
import {Image, View} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {appConfig, request, unite} from '../../../utils/index';
import Address from '../../../asset/images/address_icon.png';
import './selectArea.scss';
import {actionCreator} from "../../../store/actions";

class CourseDetail extends Taro.Component {
    config = {
        navigationBarTitleText: '城市选择',
        backgroundColor: '#fff',
    };

    state = {
        title: '',
        nameWrap: [],
        name: '',
        id: '',
    };

    componentDidMount() {
        const option = this.$router.params;
        const {areaId} = this.props;
        this.setState({
            id: areaId,
        })
        console.log(option);
        const params = {
            url: '/wx/firstPage/getCityRegionSelect',
            data:{
                adcode: option.code
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    this.setState({
                        id: option.code,
                        nameWrap: res.data,
                        name: option.name,
                    })
                }
            }
        })
    }

    thTitle = (name) => {
        this.setState({
            title: name
        })
    };

    skipIndex = () => {
        Taro.switchTab({
            url: `/pages/index/index`
        })
    };

    getAreaIds = (id, name) => {
        this.setState({
            id,
            name,
        }, () => {
            this.getAddIndex();
        })
    };

    getZxdeArea = () => {
        const {oneAdcodeName, oneAdcodeCode, getAreaId, getAdcodeCode, getAdcodeName} = this.props;
        getAreaId(oneAdcodeCode);
        getAdcodeCode(oneAdcodeCode);
        getAdcodeName(oneAdcodeName);
       this.setState({
           id: oneAdcodeCode,
           name: oneAdcodeName
       }, () => {
           this.getAddIndex();
       });
    };

    getAddIndex = () => {
        const {id,name} = this.state;
        const {getAreaId, getAdcodeCode, getAdcodeName} = this.props;
        console.log(name);
        getAreaId(id);
        getAdcodeCode(id);
        getAdcodeName(name);
        Taro.switchTab({
            url: `/pages/index/index`
        })
    };


    render() {
        const {nameWrap, name} = this.state;
        return (
            <View className="page">
                <View className="select-top-wrap">
                    <View className="select-top flex-lr">
                        <View className="flex-lr" onClick={this.getAddIndex}>
                            <Image src={Address} className="select-img"/>
                            <View>{name}</View>
                        </View>
                        <View className="select-address" onClick={this.getZxdeArea}>重新定位</View>
                    </View>
                </View>
                <View className="select-content">
                    <View className="select-name">全部城市</View>
                    <View className="select-list flex-l">
                        {nameWrap.map((item, index) => (
                            <View key={index} className={`item-name flex-center ${item.description == name ? 'item-btn-active' : ''}`} onClick={this.getAreaIds.bind(this, item.adcode, item.description)}>{item.description}</View>
                        ))}
                    </View>
                </View>
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {regionIds, oneAdcodeName, oneAdcodeCode} = state;
    return {
        regionIds,
        oneAdcodeName,
        oneAdcodeCode
    }
};

const mapDispatchToProps = {
    getAreaId: actionCreator.getAreaId,
    getAdcodeCode: actionCreator.getAdcodeCode,
    getAdcodeName: actionCreator.getAdcodeName,
};

export default connect(mapStateToProps, mapDispatchToProps)(CourseDetail);



